<template>
	<div class="page-root">
		<div 
			class="title-header" 
			:style="headerStyle"
		>
			<h3>{{shopInfo.name}}</h3>
		</div>
		<div class="header-text">
			<span @click="backClick">《</span>
			<h3>{{shopInfo.name}}</h3>
		</div>
		<Tab>
			<TabItem selected @click="type='Goods'">商品</TabItem>
			<TabItem @click="type='Comment'">评价</TabItem>
		</Tab>
		
		<component 
			:is="type"
			:menu="menu"
		></component>
		
	</div>
</template>

<script>
	
	import bus from "../util/bus.js";
	import {imgFil} from "../util/filters.js";
	import Goods from "../components/Goods.vue";
	import {Tab,TabItem} from "vux";
	
	
	export default {
		components:{
			Tab,
			TabItem,
			Goods
		},
		activated:function(){
			console.log(123);
			this.requestShopInfo();
			this.requestMenu();
		},
		computed:{
			headerStyle:function(){
				return {
					'background-image':"url("+imgFil(this.shopInfo.image_path)+")"
				}
			}
		},
		data:function(){
			return {
				shopInfo:{},
				type:"Goods",
				menu:[]
			}
		},
		methods:{
			
			backClick:function(){
				history.back();
			},
			
			//商家信息
			requestShopInfo:function(){
				this.$http.get("/ele/shopping/restaurant/"+this.$route.params.id,{
					params:{
						extras:["activities","albums","license","identification"],
						latitude:bus.lat,
						longitude:bus.lon
					}
				}).then(res=>{
//					console.dir(res.data);
					this.shopInfo = res.data;
				});
			},
			//商家菜单
			requestMenu:function(){
				this.$http.get("/ele/shopping/v2/menu",{
					params:{
						restaurant_id:this.$route.params.id
					}
				}).then(res=>{
//					console.dir(res.data);
					this.menu = res.data;
				});
			},
		}
	}
</script>

<style scoped>
	h1{
		margin: 0;
	}
	.page-root{
		/*background-color: red;*/
		width: 100%;
		height: calc(100vh - 50px);
	}
	
	.title-header{
		height: 100px;
		background-size: 100% 100%;
		filter: blur(100px);
		overflow: hidden;
	}
	
	.header-text{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100px;
	}
	
</style>